<template>
  <Row style="height: 100%">
    <Col :span="6">
      <div class="left">
        <div class="title">
          <div>执行参数</div>
          <Space :size="8">
            <Button>重置</Button>
            <Button type="primary">执行</Button>
          </Space>
        </div>
        <div class="content">
          <BoForm ref="formRef" :model="formState" :columns="_items">
            <template #hostType>
              <Button @click="onSelectHost">选择主机</Button>
            </template>

            <template #details>
              <div>
                <div class="label">
                  <div>命令参数</div>
                </div>
              </div>
            </template>
          </BoForm>
        </div>
      </div>
    </Col>
    <Col :span="12">
      <div class="center">
        <div class="title">
          <div>执行命令</div>
          <Button type="link" @click="onSelect">从模板中选择</Button>
        </div>
        <div class="content">
          <MonacoEditor v-model:value="monacoValue" :option="option" />
        </div>
      </div>
    </Col>
    <Col :span="6">
      <div class="right">
        <div class="title">
          <div>执行历史</div>
          <div>展示最近15条执行记录</div>
        </div>
        <div class="content">
          <div
            v-for="item in 15"
            @click="isActive = item"
            :class="['item', { active: isActive === item }]"
            :key="item"
          >
            <div class="left">5</div>
            <div class="right">Top</div>
          </div>
        </div>
      </div>
    </Col>
  </Row>
  <Modal
    v-model:open="visible"
    title="选择模板"
    :footer="false"
    width="1000px"
    destroy-on-close
  >
    <BoTable :columns="_columns" :request="_request" height="auto"></BoTable>
  </Modal>

  <FormModal :columns="_item">
    <template #details>
      <FormItemRest>
        <SelectHost v-model:checkList="checkList" />
      </FormItemRest>
    </template>
  </FormModal>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { SnippetsOutlined } from '@ant-design/icons-vue';
import { useFormModal } from '@boeyo/hooks';
import { BoForm, BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import {
  Button,
  Col,
  FormItemRest,
  Modal,
  Row,
  Space,
  message,
} from 'ant-design-vue';
import MonacoEditor from '@/components/monacoEditor/index.vue';
import SelectHost from '@/components/selectHost/index.vue';

const { FormModal, open } = useFormModal({
  size: 'middle',
});
const formState = ref<Record<string, any>>({});
const checkList = ref([]);
const isActive = ref();
const monacoValue = ref();
const option = {
  hideParameters: true,
  editorHeight: '100%',
};

const _items = computed<BoFormProps['columns']>(() => [
  {
    title: '主机类型',
    valueType: 'input',
    dataIndex: 'hostType',
    formItemProps: {
      rules: [{ required: true, message: '请选择主机类型', trigger: 'blur' }],
    },
  },

  {
    title: '执行描述',
    valueType: 'textarea',
    dataIndex: 'phonenumber',
    formItemProps: {
      rules: [{ required: true, message: '请输入执行描述', trigger: 'blur' }],
    },
    fieldProps: {
      rows: 4,
      placeholder: '请输入执行描述',
    },
  },
  {
    title: '超过时间',
    valueType: 'inputNumber',
    dataIndex: 'email',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入超过时间',
          trigger: 'blur',
          type: 'email',
        },
      ],
    },
    fieldProps: {
      addonAfter: '秒',
      placeholder: '请输入超过时间',
    },
    wrapperCol: { span: 24 },
    colProps: { span: 12 },
  },
  {
    title: '脚本执行',
    valueType: 'switch',
    dataIndex: 'email1',
    formItemProps: {
      tooltip: '!启用后会将命令写入脚本文件 传输到主机后执行',
      rules: [
        {
          required: true,
          message: '请输入超过时间',
          trigger: 'blur',
          type: 'email',
        },
      ],
    },
    fieldProps: {
      checkedValue: 0,
      unCheckedValue: 1,
    },
    wrapperCol: { span: 24 },
    colProps: { span: 12 },
  },
  {
    title: '',
    valueType: 'image',
    dataIndex: 'details',
  },
  {
    title: 'Host',
    valueType: 'input',
    dataIndex: 'email',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入Host',
          trigger: 'blur',
          type: 'email',
        },
      ],
    },
  },
]);
const _columns = computed<BoTableProps['columns']>(() => [
  {
    title: 'ID',
    dataIndex: 'ID',
    hideInSearch: true,
  },
  {
    title: '模板名称',
    dataIndex: 'name',
  },
  {
    title: '模板命令',
    dataIndex: 'command',
    customRender: ({ record }) => {
      const style = {
        marginRight: '5px',
        cursor: 'pointer',
      };

      const onClick = () => {
        // 检查浏览器是否支持 Clipboard API
        if (navigator.clipboard && window.isSecureContext) {
          // 使用异步的 writeText 方法
          navigator.clipboard
            .writeText(record.command)
            .then(() => {
              message.success('复制成功!');
            })
            .catch(() => {
              message.error('复制失败!');
            });
        }
      };
      return (
        <div>
          <SnippetsOutlined style={style} onClick={onClick} />
          <span>{record.command}</span>
        </div>
      );
    },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    actions: [
      {
        text: '选择',
        onClick(record) {
          onChangeSelect(record);
        },
      },
    ],
  },
]);

const _request = () => {
  return {
    total: 0,
    rows: [
      {
        command: '1111',
      },
    ],
  };
};
const visible = ref(false);
const onSelect = () => {
  visible.value = true;
};
const onChangeSelect = () => {
  visible.value = false;
};

const onSelectHost = () => {
  open({
    title: '选择主机',
    // hideFooter: true,
    request: async (params: any) => {},
    defaultValue: {
      status: '1',
    },
  });
};
const _item = computed<BoFormProps['columns']>(() => [
  {
    title: '',
    valueType: 'input',
    dataIndex: 'details',
    wrapperCol: { span: 24 },
    colProps: { span: 24 },
  },
]);
</script>

<style scoped lang="scss">
.left {
  height: 100%;
  .label {
    text-align: center;
    border-top: 1px solid #ccc;
    padding-top: 10px;
  }
  .content {
    margin-top: 20px;
  }
}
.center {
  height: 100%;
  padding: 0 30px;
}
.title {
  display: flex;
  justify-content: space-between;
  height: 40px;
  align-items: center;
  div:first-child {
    font-weight: 700;
  }
}
.content {
  height: calc(100% - 40px);
  .item {
    border: 1px solid #ccc;
    padding: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    &.active {
      background-color: #bbbbbb;
    }
    .left {
      height: 30px;
      width: 30px;
      line-height: 30px;
      background-color: #165dff;
      text-align: center;
      margin-right: 50px;
    }
  }
}
</style>

<route lang="json">
{
  "name": "automaticInspection",
  "meta": {
    "title": "手动巡检"
  }
}
</route>
